<template>
	<view class="container">
		<view class="tui-order-header">
			<view class="tui-text">订单编号：
				<text class="tui-bold">{{orderNo}}</text>
			</view>
			<view class="tui-text">快递单号：
				<text class="tui-bold">{{deliveryid || ''}}</text>
			</view>
			<!-- <view class="tui-text">国内承运人：华南众包站</view>
			<view class="tui-text">预计送达：
				<text class="tui-bold">5</text>月<text class="tui-bold">1</text>日</view> -->
		</view>
		<view class="logtext"  @tap="towebView">
			查看地图轨迹
			<!-- <view style="width: 100%; height: 400rpx;">
				<template>
					<view  style="width: 750rpx; height: 400rpx;">
						<logistics :trailUrl="data.trailUrl" :title="title"></logistics>
					</view>
				</template>
				
			</view> -->
			
			
		</view>
		<view class="tui-order-tracking">
			<tui-time-axis v-for="item in data.list" v-bind:key="item.id">
				
					<tui-timeaxis-item backgroundColor="transparent">
						<template v-slot:node>
							
							<view class="tui-node">
								<tui-icon name="order" color="#fff" :size="12"></tui-icon>
							</view>
						</template>
						
						<template  v-slot:content>
							<!-- <view class="tui-order-title">{{item.opeTitle}}</view> -->
							<view class="tui-order-desc">{{item.context}}</view>
							<view class="tui-order-time">{{item.time}}</view>
						</template>
					</tui-timeaxis-item>
			
			</tui-time-axis>
		</view>
	</view>
</template>

<script>
	

	//#ifdef  H5
		let jweixin = require('jweixin-module')
	//#endif
	//公共api接口封装方法
	//获取网络状态
	import { mapGetters } from 'vuex';
	import Vue from 'vue'
	import tuiTimeAxis from "@/components/tui-time-axis/tui-time-axis"
	import tuiTimeAxisItem from "@/components/tui-timeaxis-item/tui-timeaxis-item"
	import logistics from '@/components/logistics/logistics.vue';
	export default {
		components: {
			tuiTimeAxis,
			tuiTimeAxisItem,
			logistics
		},
		data() {
			
			return {
               backgroundColor:"#5677fc",
				webviewStyles:{
					width:'750rpx',
					height:'400rpx',
				},
				title:'',
				deliveryid:'',
				from:'',
				to:'',
			   data:{
					trailUrl:'', //https://api.kuaidi100.com/tools/map/be1f1128ecc22c76caee9f2cd83010c7_108.366543,22.817002_5
					list:[],
							
			   },
			   waybillCode:'',
			   orderNo:'',
			}
		},
		
		onLoad(options){
			console.log(options)
            let page=options.page || ""
			
			if(page=='mall'){
				this.backgroundColor="#EB0909";
				uni.setNavigationBarTitle({
					title:"查看物流"
				})
				setTimeout(()=>{
					uni.setNavigationBarColor({
						backgroundColor:this.backgroundColor,
						frontColor:"#ffffff"
					})
				},50)
			}
			
			this.deliveryid =options.deliveryid || '';
			this.orderNo = options.orderNo || '';
			this.from = options.from|| '广西南宁市';
			this.to  = options.to || ''
			this.getList()
			
			
		},
		
		computed: {
			//注册网络状态
			...mapGetters(['netWorkType'])	
		},
		methods:{
			towebView(){
				let _this=this
				// uni.showToast({
				// 	icon: 'none',
				// 	title: '开发中'
				// })
				// return 
				if(!_this.data.trailUrl){
					uni.showToast({
						icon:'none',
						title:'等待发货中...'
					})
					return ;
				}
				var data = {
					trailUrl:_this.data.trailUrl,
					
				}
				
				//公共物流查询页面
				// console.log(1111)
				_this.$refer.setVilit('/pages/Order/logisticsMap/index')
				let callback = function(url) {
					_this.$refs.popupvLogin.open()
				}
				
				
				_this.$refer.toUrl(callback, data)
			},
			getList(){
				const _this = this
				// console.log(1111)
				//运单号
				
				let data={
					deliveryid:_this.deliveryid,  //物流号
					from:_this.from,
					to:_this.to,
					
				}
				// 公共物流查询
				var opt = {
					url: '/order/logistics',
					data:data,
					success: function(res) {
						console.log(res)
						if (res.status == 1) {
							console.log(res)
							// Vue.set(_this.data,'list',res.data.list.jingdong_ldop_receive_trace_get_responce.querytrace_result.data)
							_this.data.list = res.data.list.data
							_this.data.trailUrl = res.data.list.trailUrl
							if(!_this.deliveryid){
								uni.showToast({
									icon:'none',
									title:'预计24小时内发货！'
								})
							}
							_this.$forceUpdate()
							console.log(_this.data.list)
						} else {
							//未登陆
							
						}
							
					}
				};
				
				//登陆状态才远程访问资源
				// if (_this.loginStatus) {
				// 	_this.$service.GetApi(opt)
				// 	// 新网络请求方式
				// }	
				_this.$service.GetApi(opt)
				
			
			},
			
				
			
		}
	}
</script>

<style>
	.logtext{
		text-align: center;
		color: #03A9F4;
		padding: 20rpx;
	}
	.tui-order-header {
		padding: 30rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.tui-text {
		font-size: 28rpx;
		color: #333;
		padding: 4rpx;
	}
	.

	.tui-bold {
		font-weight: bold;
	}

	.tui-node {
		height: 44rpx;
		width: 44rpx;
		border-radius: 50%;
		background-color: #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		flex-shrink: 0;
	}

	.tui-node-dot {
		height: 16rpx;
		width: 16rpx;
		background-color: #ddd;
		border-radius: 50%;
		/* transform: translateY(45%); */
		margin-top: 6rpx;
	}

	.tui-bg-primary {
		background: #EB0909 !important;
	}

	.tui-order-tracking {
		padding: 30rpx 30rpx 30rpx 40rpx;
		background: #fff;
		margin-top: 20rpx;
		box-sizing: border-box;
	}

	.tui-order-title {
		padding-bottom: 12rpx;
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.tui-order-desc {
		padding-bottom: 12rpx;
		font-size: 28rpx;
		color: #333;
	}

	.tui-ptop {
		display: flex;
		justify-content: flex-start;
		line-height: 28rpx;
	}

	.tui-order-time {
		font-size: 24rpx;
		font-weight: bold;
	}

	.tui-gray {
		color: #848484 !important;
	}

	.tui-light-gray {
		color: #888 !important;
	}

	.tui-primary {
		color: #5677fc;
	}
</style>
